<template>
<main>
    <div class="box">
      <div class="banner">
        <img src="../assets/ptai/banner.png" alt="banner">
      </div>
      <div class="choto">
        <div @click="changeActive(0)" :class="['c1',{'background':isActive==0}]">
          <span>化肥产品</span>
        </div>
        <div @click="changeActive(1)" :class="['c2',{'background':isActive==1}]">
          <span>农资经销商</span>
        </div>
        <div @click="changeActive(2)" :class="['c3',{'background':isActive==2}]">
          <span>服务代理商</span>
        </div>
      </div>
      <div class="main">
        <div class="mainaa" v-if="isActive == 0">
          <div class="main-box" v-for="(item,index) in list1" :key="index">
            <img :src="item.img" >
            <span>{{item.text}}</span>
          </div>
        </div>
        <div class="mainaa" v-if="isActive == 1">
          <div class="main-box" v-for="(item,index) in list2" :key="index">
            <img :src="item.img" >
            <span>{{item.text}}</span>
          </div>
        </div>
        <div class="mainaa" v-if="isActive == 2">
          <div class="main-box" v-for="(item,index) in list3" :key="index">
            <img :src="item.img" >
            <span>{{item.text}}</span>
          </div>
        </div>
      </div>
    </div>
</main>
</template>

<script>
export default {
  data(){
    return{
      isActive: 0,
      list1:[
        {
          img: require('../assets/ptai/huafei1.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        },
        {
          img: require('../assets/ptai/huafei2.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        },
        {
          img: require('../assets/ptai/huafei3.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        },
        {
          img: require('../assets/ptai/huafei4.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        },        {
          img: require('../assets/ptai/huafei5.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        }
      ],
       list2:[
        {
          img: require('../assets/ptai/huafei1.jpg'),
          text: '这是第二个list'
        },
        {
          img: require('../assets/ptai/huafei2.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        },
        {
          img: require('../assets/ptai/huafei3.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        },
        {
          img: require('../assets/ptai/huafei4.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        },        {
          img: require('../assets/ptai/huafei5.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        }
      ],
       list3:[
        {
          img: require('../assets/ptai/huafei1.jpg'),
          text: '这是第三个list'
        },
        {
          img: require('../assets/ptai/huafei2.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        },
        {
          img: require('../assets/ptai/huafei3.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        },
        {
          img: require('../assets/ptai/huafei4.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        },        {
          img: require('../assets/ptai/huafei5.jpg'),
          text: '万亿16-68硫酸钾复合肥25公斤'
        }
      ],
    }
  },
  methods:{
    changeActive(value){
      let map = {0:0,1:1,2:2}
      this.isActive = map[value]
    }
  }
}
</script>
<style lang="stylus" scoped>
main{
    width 100%
    margin-top 100px
    .box{
        width 100% 
        .banner{
            width 100%
            img{
                width:100%;
                height:700px;
            }
        }
        .choto{
          height:100px;
          margin-top 28px
          width 100%
          display flex
          flex-direction row
          align-items center
          justify-content center
          margin-bottom 30px
          div{
            width:604px;
            height:160px;
            display flex
            justify-content center
            align-items center
            font-size 26px
            font-weight:bold;
            color #010101
            cursor pointer
            span{
              margin-top -20px
            }
          }
        }
        .main{
           margin-top -50px
           width 100%
           display flex
           justify-content center
           background: url('../assets/back.png') no-repeat;
           background-size 100%;
           .mainaa{
             margin-top 100px
             width 1814px
             display flex
             flex-direction row
             flex-wrap wrap
            }
           .main-box{
             display flex
             flex-direction column
             align-items center
             width:540px;
             margin-right 52px
             margin-bottom 100px
             img{
              width:500px;
             }
             span{
               width:395px;
               height:25px;
               margin-top 20px
               font-size:26px;
               font-family:Source Han Sans SC;
               font-weight:400;
               color:rgba(0,0,0,1);
               line-height:50px;
             }
           }
        }
    }
}
.background{
  background: url('../assets/ptai/sanjiao.png') no-repeat;
  background-size 100%;
  color #FDFEFE !important
  font-size 30px !important
}

</style>